<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :show-close="false"
      width="600px"
      :visible.sync="upload.open"
    >
      <template slot="title">
        <div class="disFlxJS">
          <div>
            {{ title
            }}<span class="fz-10 _pl-10" style="color: #666"
              >(可把文件拖入指定区域,完成上传)</span
            >
          </div>
          <div class="disFlxAC">
            <a v-if="templateUrl" :href="templateUrl">
              <el-button class="fz-12" size="mini" type="primary"
                >下载导入模板</el-button
              >
            </a>
            <i
              class="iconfont el-icon-close fz-20 pl-20 color9"
              @click="upload.open = false"
            />
          </div>
        </div>
      </template>
      <div class="hoverBox">
        <el-upload
          ref="upload"
          :limit="1"
          accept=".xlsx, .xls"
          :headers="upload.headers"
          :action="uploadUrl"
          v-loading="upload.isUploading"
          element-loading-text="上传中..."
          drag
          :show-file-list="false"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :before-upload="handleBeforeUpload"
        >
          <div style="width: 550px; height: 170px" class="disFlxCC">
            <i class="iconfont el-icon-upload2 fz-30 text" />
            <div class="fw-6 pt-10 fz-15 text">上传导入文件</div>
            <div class="fz-12 pt-10 text">
              导入需先下载导入模板,且按模板中说明及要求进行规范填写
            </div>
            <div class="fz-12 pt-5 text">
              上传按模板规范填写后的文件,系统会自动进行批量{{ title }}
            </div>
          </div>
        </el-upload>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { getBaseUrl } from "@/utils/ruoyi.js";

export default {
  props: {
    title: {
      type: String,
      default: "导入数据",
    },
    // 上传的接口地址
    url: {
      type: String,
      default: "",
    },
    // 模板链接
    templateUrl: {
      type: String,
      default: "",
    },
    // 自定义上传
    customUpload: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    uploadUrl() {
      return getBaseUrl() + this.url;
    },
  },
  data() {
    return {
      upload: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
      },
    };
  },
  methods: {
    openModal() {
      this.upload.open = true;
    },
    handleBeforeUpload(file) {
      if (this.customUpload) { // 自定义上传，拦截
        this.$emit('uploadFile', file)
        return false
      }
      return true; // 继续上传
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      if (response.code == 200) {
        if (response.data && response.data.length) {
          this.$emit('openErr', response.data)
          this.$emit("refresh");
          return;
        }
        this.$emit("refresh");
        this.$message.success("导入成功");
        this.upload.open = false;
      } else {
        this.$message.error(response.msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.hoverBox {
  &:hover {
    color: #1890ff;
    border-color: #1890ff;
    .text {
      color: #1890ff;
    }
  }
}
</style>
<style scoped>
.hoverBox >>> .el-upload-dragger {
  width: auto;
}
</style>
